import { ProjectListTem } from '../Template'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'

import { Column } from '@ant-design/plots'
import { complexColumnTemplate } from '../Template'
import { useRef } from 'react'
import { useRequest, useSize, useEventEmitter } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'
import { insertCharacter } from '../../../../Common/Configure/Common'

export const NinOne = () => {
    const ChartOne = useRef()
    const SizeOne = useSize(ChartOne)
    const ChartTwo = useRef()
    const SizeTwo = useSize(ChartTwo)

    const [Active, setActive] = useState()

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ tableName, standardCount, entryCount }) => {
                let label = tableName.length > 4 ? insertCharacter(tableName, '\n', 4) : tableName
                data = [
                    ...data,
                    { type: '计划数', label: label, value: standardCount },
                    { type: '进场数', label: label, value: entryCount },
                ]
            })
            setDataOne(data)
        },
    })

    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ planDate, standardCount, entryCount }) => {
                data = [
                    ...data,
                    { type: '计划数', label: planDate, value: standardCount },
                    { type: '进场数', label: planDate, value: entryCount },
                ]
            })
            setDataTwo(data)
        },
    })

    useEffect(() => {
        if (Active) {
            getOne({ url: 'getJTGJMachineTypeList', data: { organizationUuid: Active } })
            getTwo({ url: 'getJTGJMachineMonthList', data: { organizationUuid: Active } })
        }
    }, [getOne, getTwo, Active])

    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => setActive(val))

    const [DataOne, setDataOne] = useState()
    const [DataTwo, setDataTwo] = useState()

    return (
        <>
            <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            <div className="Right" style={{ flex: 1230 }}>
                <CommonSmallTitle title="按类别统计" style={{ marginBottom: 16 }}>
                    <div className="one" ref={ChartOne}>
                        {SizeOne && DataOne && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeOne,
                                    data: DataOne,
                                    color: ['rgba(155, 253, 254, 1)', 'rgba(255, 212, 123, 1)'],
                                    isGroup: true,
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按月统计">
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && DataTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: ['rgba(155, 253, 254, 1)', 'rgba(255, 212, 123, 1)'],
                                    isGroup: true,
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
        </>
    )
}
